<script setup >
import { postMemberCart, postGoodsList } from '@/api/cart'
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { showImagePreview } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
import { useCounterStore } from '@/stores/counter'

const userStore = useCounterStore()


// console.log(userStore.setUserState);

const router = useRouter()
const route = useRoute()

const list = ref([])

onMounted(() => {
    postGoodsList({
        id: route.query.id
    }).then(res => {
        list.value = res.data.result
        // console.log(res.data.result);
    })
})

//历史返回
function onClickLeft() {
    history.back();
}

//添加购物车
function addCart() {
    // console.log(window.localStorage.getItem('token'));

    postMemberCart({
        Authorization: window.localStorage.getItem('token'),
        skuId: list.id,
        count: 1,

    }).then(res => {
        if (res.data.code !== '200') {
            return showFailToast(res.data.message);
        }
        showSuccessToast(res.data.message);

    })
}

function btnCart() {
    router.push('/cart')
}

function btnAddCart() {
    showSuccessToast('添加成功');
    // userStore.setUserState(list.value)
    userStore.setUserState({
        desc:list.value.desc,
        id: list.value.id,
        name:list.value.name,
        orderNum: 1,
        picture:list.value.mainPictures[0],
        price: list.value.price
    })
}

function btnBuyCart() {
    router.push({
        path: '/order',
        query: { id: list.value.id }
    })
}

</script>


<template>
    <div>
        <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in list.mainPictures" :key="item" >
                <van-image :src="item" ></van-image>
            </van-swipe-item>
        </van-swipe>


        <div class="detial_box">
            <p>商品名称：{{ list.name }}</p>
            <p>商品数量：{{ 1 }}</p>
            <p>商品价格：{{ list.price }}</p>
            <p>商品详情：{{ list.desc }}</p>
        </div>

        <van-action-bar>
            <van-action-bar-icon icon="cart-o" text="购物车" @click="btnCart" />
            <!-- <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" /> -->
            <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="btnAddCart" />
            <van-action-bar-button color="#7232dd" type="danger" text="立即购买" @click="btnBuyCart" />
        </van-action-bar>

    </div>
</template>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    height: 3.4rem;
}

.van-image {
    width: 100%;
    height: 100%;
}

.detial_box {
    p {
        font-size: 0.2rem;
        font-family: 'SimSun';
    }
}
</style>